<template>
  <view class="page">
   

    <!-- 用户列表 -->
    <view class="user-list">
      <view class="user-item" v-for="(user, index) in userList" :key="index">
        <view class="user-info">
          <image class="avatar" :src="user.avatar" />
          <view class="information">
            <view class="text">
				<text class="name">{{ user.name }}</text>
				<view class="user_id">
				  <text class="id">ID:</text>
				  <text class="value">{{ user.id }}</text>
				</view>
			</view>
            <view class="join-time">加入时间：{{ user.joinTime }}</view>
          </view>
        </view>
        <view class="action">
          <text class="button">查看商家</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userList: [
        {
          avatar: "https://admin.cqycgyl.com/uploads/20250909/8d51369c68cce7c0c5ddc3a91e75421f.png",
          name: "米老鼠",
          id: "2024477",
          joinTime: "2025-08-02",
        },
        {
          avatar: "https://admin.cqycgyl.com/uploads/20250909/8d51369c68cce7c0c5ddc3a91e75421f.png",
          name: "米老鼠",
          id: "2024477",
          joinTime: "2025-08-02",
        },
        {
          avatar: "https://admin.cqycgyl.com/uploads/20250909/8d51369c68cce7c0c5ddc3a91e75421f.png",
          name: "米老鼠",
          id: "2024477",
          joinTime: "2025-08-02",
        },
        {
          avatar: "https://admin.cqycgyl.com/uploads/20250909/8d51369c68cce7c0c5ddc3a91e75421f.png",
          name: "米老鼠",
          id: "2024477",
          joinTime: "2025-08-02",
        },
        {
          avatar: "https://admin.cqycgyl.com/uploads/20250909/8d51369c68cce7c0c5ddc3a91e75421f.png",
          name: "米老鼠",
          id: "2024477",
          joinTime: "2025-08-02",
        },
      ],
    };
  },
  methods: {
    goBack() {
      uni.navigateBack(); // 小程序返回上一页
    },
  },
};
</script>

<style>
/* 页面整体 */
.page {
  background-color: #f5f5f5;
  padding: 30rpx;
}


/* 用户列表 */
.user-list {
  background-color: #F6F8F7;;
}

.user-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 34rpx;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.user-info{
	display: flex;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 25%;
  margin-right: 10px;
}

.information .text{
  display: flex;
}

.name {
  font-weight: bold;
  font-size: 28rpx;
  color: #333333;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.user_id {
  width: 142rpx;
  height: 46rpx;
  background: rgba(29,197,124,0.1);
  border-radius: 4rpx 4rpx 4rpx 4rpx;
  border: 1rpx solid #1DC57C;
  margin-left: 12rpx;
  margin-bottom: 16rpx;
  text-align: center;
}

.user_id text {
  font-weight: 400;
  font-size: 22rpx;
  color: #1DC57C;
  line-height: 44rpx;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-bottom: 16rpx;
}

.join-time {
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.action {
  display: flex;
  align-items: center;
}

.button {
  width: 174rpx;
  height: 64rpx;
  line-height: 64rpx;
  text-align: center;
  background-color: #fff;
  border-radius: 36rpx 36rpx 36rpx 36rpx;
  border: 2rpx solid #999999;   
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  
}
</style>
